<template>
  <!-- 民警管理 -- 详情 -->
  <public-modal
    :footer="false"
    :publicVisible="publicVisible"
    :title="title"
    modalStyle="detailsPoliceModal"
    width="560px"
    @cancel="cancel"
    @handleOk="handleOk"
  >
    <div slot="content">
      <div class="top card flex">
        <div class="img-wrap">
          <img v-if="details.userImage" :src="details.imgPrefix + details.userImage" alt="" />
          <img v-else alt="" src="@/assets/imgs/tableperson.png" />
        </div>
        <div class="info-wrap flex column justify-between">
          <div>
            <span>人员类型：</span>
            <span class="textVer value">{{ calcStatus(status) }}</span>
          </div>
          <div>
            <span>人员姓名：</span>
            <span class="textVer value">{{ details.userName }}</span>
          </div>
          <div>
            <span>手机号码：</span>
            <span class="textVer value">{{ details.mobile }}</span>
          </div>
          <div v-if="status == 0">
            <span>民警警号：</span>
            <span class="textVer value">{{ details.policeUserNo }}</span>
          </div>
          <div>
            <span>身份证号：</span>
            <span class="textVer value">{{ details.idCard || '未填写' }}</span>
          </div>
          <div>
            <span>管辖辖区：</span>
            <span class="textVer value">{{ details.jurisdictionName || '暂未指定' }}</span>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer"></div>
  </public-modal>
</template>

<script>
import publicModal from '@/components/publicModal'
import { status } from 'nprogress'

export default {
  name: 'detailsPoliceModal',
  components: { publicModal },
  data() {
    return {
      publicVisible: false,
      details: {},
      title: '',
      status: 0,
    }
  },
  methods: {
    show(records, status = 0) {
      let enmu = {
        0: '民警',
        1: '辅警',
        2: '网格员',
      }
      this.status = status
      this.title = enmu[status] + '详情'
      this.details = records
      this.publicVisible = true
    },
    calcStatus(status) {
      if (status == 0) return '民警'
      else if (status == 1) return '辅警'
      else if (status == 2) return '网格员'
      else return '未知'
    },
    handleOk() {
      this.publicVisible = false
    },
    cancel() {
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less" scoped>
.detailsPoliceModal {
  .top {
    padding: 30px;
    line-height: 27px;

    .img-wrap {
      width: 130px;
      height: 160px;
      margin-right: 0.25rem;
      img {
        width: 130px;
        height: 160px;
      }
    }

    .info-wrap {
      font-size: 16px;
      font-weight: bold;
      span {
        font-size: 14px;
        font-weight: 400;
        color: var(--theme-tab-text-color);
      }
      .value {
        font-weight: 700;
        color: var(--theme-modal-label-value-color);
      }
    }
  }
}
</style>
